<template>
  <view>
    <scroll-view
      :scroll-y="modalName == null"
      class="page"
      :class="modalName != null ? 'show' : ''"
    >
      <cu-custom class="custom-nav">
        <block slot="left">
          <view class="cu-item1" @tap="cleanAll" data-target="DialogModal1">
            <view
              style="font-size: 24px"
              :class="['cuIcon-' + bageObj.cuIcon, 'text-' + bageObj.color]"
            >
              <view class="cu-tag badge" v-if="bageObj.badge != 0">
                <block v-if="bageObj.badge != 1">{{
                  bageObj.badge > 99 ? "99+" : bageObj.badge
                }}</block>
              </view>
            </view>
          </view>
        </block>
        <block slot="content">事件</block>
        <block slot="right">
          <view @tap="orderbyChange" data-target="bottomModal">
            <text class="cuIcon-filter"></text>
            <text>筛选</text>
          </view>
        </block>
      </cu-custom>
      <view class="cu-list">
        <view
          class="cu-item menu arrow comment solids-top"
          v-for="(item, index) in msglist"
          @tap="goDetail"
          :data-id="item"
          :key="index"
        >
          <view class="content shadow">
            <view class="content_top">
              <text class="text-grey animation-slide-top">{{ item.id }}</text>
              <text
                class="text-grey animation-slide-top"
                style="font-size: small"
                >{{ item.time }}</text
              >
              <button
                v-if="item.status == 1"
                class="cu-btn bg-blue margin-tb-sm sm animation-slide-top"
              >
                已确认
              </button>
              <button
                v-else
                class="cu-btn bg-red margin-tb-sm sm animation-slide-top"
              >
                待确认
              </button>
            </view>
            <view class="content_bottom">
              <text class="text-black c-item"
                >目标名称: <text class="text-grey">12</text></text
              >
              <text class="text-black c-item"
                >频段: <text class="text-grey">12</text></text
              >
              <text class="text-black c-item"
                >检测类型: <text class="text-grey">12</text></text
              >
              <text class="text-black c-item"
                >目标类型: <text class="text-grey">12</text></text
              >
              <text class="text-black c-item"
                >所属区域: <text class="text-grey">12</text></text
              >
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <fjj-condition
      ref="condition"
      @touchmove.stop
      :showBackButton="true"
      :list="menuList"
      :defaultValue="defaultValue"
      @result="resultConditon"
    />
    <!-- 筛选框 -->
    <view
      class="cu-modal bottom-modal"
      :class="modalName == 'bottomModal' ? 'show' : ''"
    >
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-gray" @tap="hideModal">清空</view>
          <view class="action text-blue">确定</view>
        </view>
        <view class="padding-xl">
          <view class="cu-form-group margin-top">
            <view class="title">检测类型：</view>
            <picker @change="PickerChange" :value="index" :range="picker">
              <view class="picker">
                {{
                  index > -1
                    ? picker[index]
                    : "禁止换行，超出容器部分会以 ... 方式截断"
                }}
              </view>
            </picker>
          </view>
          <view class="cu-form-group margin-top">
            <view class="title">目标类型：</view>
            <picker @change="PickerChange" :value="index" :range="picker">
              <view class="picker">
                {{
                  index > -1
                    ? picker[index]
                    : "禁止换行，超出容器部分会以 ... 方式截断"
                }}
              </view>
            </picker>
          </view>
          <view class="cu-form-group margin-top">
            <view class="title">确认状态：</view>
            <picker @change="PickerChange" :value="index" :range="picker">
              <view class="picker">
                {{
                  index > -1
                    ? picker[index]
                    : "禁止换行，超出容器部分会以 ... 方式截断"
                }}
              </view>
            </picker>
          </view>
          <view class="cu-form-group margin-top">
            <view class="title">所在区域：</view>
            <picker @change="PickerChange" :value="index" :range="picker">
              <view class="picker">
                {{
                  index > -1
                    ? picker[index]
                    : "禁止换行，超出容器部分会以 ... 方式截断"
                }}
              </view>
            </picker>
          </view>
          <view class="cu-form-group">
            <view class="title"></view>
            <picker mode="date" :value="date" @change="DateChange">
              <view class="picker">
                {{ date }}
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <!-- 事件处理弹窗 -->
    <view class="cu-modal" :class="modalName1 == 'DialogModal1' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-title justify-end">
          <view class="content">提示</view>
          <view class="action" @tap="modalName1 = 'null'">
            <text
              class="cuIcon-close text-white"
              style="font-weight: 700"
            ></text>
          </view>
        </view>
        <view class="padding-xl">
          <!-- Modal 内容。 -->
          <text>确认一键确认所有事件吗？</text>
        </view>
        <view class="cu-bar bg-white justify-center">
          <view class="action">
            <button class="cu-btn bg-red" @tap="modalName1 = 'null'">
              取消
            </button>
            <button class="cu-btn bg-blue margin-left" @tap="sure">确定</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import fjjCondition from "./fjj-condition/fjj-condition.vue";
import tBar from "../index/index.vue";
export default {
  components: { fjjCondition, tBar },
  data() {
    return {
      modalName: null,
      modalName1: null,
      bageObj: {
        cuIcon: "notice",
        color: "fff",
        badge: 0,
        name: "通知",
      },
      msglist: [
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 1,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 1,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 0,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 1,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 0,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 1,
        },
        {
          id: "ID:16464654654",
          time: "2024年4月10日 15:25:23",
          status: 0,
        },
      ],
      index: -1,
      picker: ["喵喵喵", "汪汪汪", "哼唧哼唧"],
      date: "2024-05-01",
      value: ["2024-04-10", "2024-04-11"],
      menuList: [],
      defaultValue: {},
    };
  },
  mounted() {
    this.menuList = [
      {
        title: "目标类型:",
        type: "custom1",
        key: "custom2",
        isMutiple: false, //单选
        detailList: [
          { value: 0, text: "全部" },
          { value: 1, text: "黑名单" },
          { value: 2, text: "白名单" },
          { value: 2, text: "白名单" },
        ],
      },
      {
        title: "检测类型:",
        type: "custom1",
        key: "custom2",
        isMutiple: false, //单选
        detailList: [
          { value: 0, text: "全部" },
          { value: 1, text: "默认" },
          { value: 1, text: "雷达" },
          { value: 2, text: "侦听" },
        ],
      },
      {
        title: "确认状态:",
        type: "custom1",
        key: "custom2",
        isMutiple: false, //单选
        detailList: [
          { value: 0, text: "待确认" },
          { value: 1, text: "已确认" },
        ],
      },
      {
        title: "所属区域:",
        type: "custom1",
        key: "custom2",
        isMutiple: false, //单选
        detailList: [
          { value: 0, text: "区域一" },
          { value: 1, text: "区域二" },
        ],
      },
      {
        title: "发现时间：",
        type: "range",
        key: "time11",
      },
    ];
  },
  created() {
    this.defaultValue = {
      custom2: 1,
      time11: this.getPastWeekDateRange(),
    };
    this.bageObj.badge = this.msglist.filter((item) => item.status == 0).length;
  },

  watch: {
    msglist(newVal) {
      if (newVal) {
        this.bageObj.badge = newVal.filter((item) => item.status == 0).length;
      }
    },
  },

  methods: {
    //一键清除 确认
    cleanAll(e) {
      this.modalName1 = e.currentTarget.dataset.target;
    },
    sure() {
      this.msglist = this.msglist.map((item) => {
        item.status = 1;
        return item;
      });
      this.modalName1 = null;
    },
    // 获取最近一周的时间
    getPastWeekDateRange() {
      var today = new Date();
      var lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000); // 7 days ago

      var year = lastWeek.getFullYear();
      var month = lastWeek.getMonth() + 1; // getMonth() returns 0-11
      var day = lastWeek.getDate();
      var start = year + "-" + month + "-" + day;
      var end =
        today.getFullYear() +
        "-" +
        (today.getMonth() + 1) +
        "-" +
        today.getDate();
      // 返回开始日期和结束日期
      return [start, end];
    },
    // 跳到事件详情
    goDetail(item) {
      const path = "/pages/track/track";
      const query = {
        id: item.index,
        status: item.status || 1,
      };
      // this.$Router.replaceAll({
      //   name: "track",
      //   params: params,
      // });
      this.$Router.push({
        path,
        query,
      });
    },
    //筛选返回值
    resultConditon(obj) {
      this.$refs.condition.visibleDrawer = false;
      this.hasChoose = obj.hasChoose;
      console.log(obj);
    },
    orderbyChange(obj) {
      this.$refs.condition.visibleDrawer = true;
    },
    // 筛选
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    hideModal(e) {
      this.modalName = null;
    },
    PickerChange(e) {
      this.index = e.detail.value;
    },
    DateChange(e) {
      this.date = e.detail.value;
    },
  },
};
</script>

<style scoped>
.page {
  height: 100vh;
  width: 100vw;
  padding-bottom: 60px;
}

.page.show {
  overflow: hidden;
}
.custom-nav,
.cu-bar.fixed {
  color: aliceblue;
}
.cu-item {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
}

.content_top {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-items: center;
  padding: 0 15px;
}
.content_bottom {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}
.cu-list {
  margin: 10px 17px;
}
.c-item {
  width: 45%;
  padding: 5px 0;
  margin: 5px 0;
}
.cu-item1 {
  position: relative;
}
.cu-tag1 {
  position: absolute;
  top: 2px;
  left: 0;
}
</style>
